import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,

} from "snabbdom";

import './css/index.css'
import h from './mysnabbdom/h.js';
// 创建path函数
const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
]);
const container = document.getElementById('container');
console.log(container);
console.log(container.id);
const btn = document.getElementById('btn');
// key的作用，服务于最小量更新
// key是这个节点的唯一标识，在更改前后它们是同一个DOM节点
/* 
1.只有是同一个虚拟节点，才进行精细化比较，如ul节点改成了ol节点，就不算相同的虚拟节点（一般不会去修改父级节点）
相同虚拟节点 定义：选择器相同 && key相同，两者缺一不可，
这样我们在写代码的时候，就不会更改父节点的选择器，key也使用唯一相同的值
如不相同，就会暴力删除旧的，插入新的
*/

/* h函数用于创建虚拟节点 */
/* 虚拟节点的属性
  children: undefined | []  子元素 
  data: {}   属性
  elm: undefined   undefined表示当前节点还没有上树，
  key: undefined    节点的唯一标识，服务于最小量更新的
  sel: "div"        选择器
  text: undefined    文字
*/
const myVNode1 = h('div', {}, [
  h('p', { key: 'a', class: { 'box1': true } }, '西瓜'),
  h('p', { key: 'b' }, '苹果'),
  h('p', { key: 'c' }, '火龙果')
])
console.log(myVNode1);

// 让虚拟节点上树
patch(container, myVNode1);
const myVNode2 = h('div', {}, [
  h('p', { key: 'd' }, '火龙果1'),
  h('p', { key: 'a', class: { 'box1': true }, on: { click: anotherEventHandler } }, '西瓜2'),
  h('p', { key: 'b' }, '苹果'),
  h('p', { key: 'c' }, '火龙果')
])
function anotherEventHandler () {
  console.log(222);
}
console.log(myVNode2);
//让虚拟节点上树
btn.onclick = function (param) {
  console.log(myVNode2);
  patch(myVNode1, myVNode2);
}

/* 2.只进行同层比较，不会进行跨层比较，即使是同一片虚拟节点，但是夸层了，对不起，精细化比较不diff你，而是暴力删除旧的，插入新的 */
// const myVNode3 = h('div', {}, h('div', {}, [
//   h('p', { key: 4 }, '火龙果1'),
//   h('p', { key: 1, class: { 'box1': true } }, '西瓜'),
//   h('p', { key: 2 }, '苹果'),
//   h('p', { key: 3 }, '火龙果')
// ]))